<html>
    <head>
        <script src="../../../../../../lib/externals/ext/adapter/ext/ext-base.js"></script>
        <script src="../../../../../../lib/externals/ext/ext-all-debug.js"></script>
        <script src="../../../../../lib/Ext.ux.js"></script>
    
        <script>
        
        function test_constructor(t) {
            
            t.plan(2);
            
            var store = new Ext.data.Store();
            var defaults = {checked: false};
            
            var node = new Ext.ux.tree.TreeStoreNode({
                store: store,
                defaults: defaults
            });
            
            t.ok(node.store === store, "store well set");
            t.ok(node.defaults === defaults, "defaults well set");
            
            node.destroy();
            
        }
        
        function test_render(t) {
            
            t.plan(5);
            
            var store = new Ext.data.Store();
            var record_factory = Ext.data.Record.create([
                'text',
                {name: 'displayInTree'}
            ]);
            var record_not_in_tree = new record_factory({
                text: 'not_in_tree',
                displayInTree: false
            });
            var record_in_tree = new record_factory({
                text: 'in_tree',
                displayInTree: true
            });
            store.add([record_not_in_tree, record_in_tree]);
            
            var node = new Ext.ux.tree.TreeStoreNode({
                loaded: true,
                store: store
            });
            
            var panel = new Ext.tree.TreePanel({
                renderTo: "tree",
                root: node
            });
            
            t.eq(node.childNodes && node.childNodes.length, 1, "tree node has only one child");
            t.ok(node.firstChild.text === undefined, "check child node.text is undefined since node has not been rendered yet");
            node.expand();
            t.ok(node.firstChild.text === "in_tree", "check child node.text copied from record on render");

            var record_foo = new record_factory({
                text: 'foo',
                displayInTree: true
            });
            store.add(record_foo);
            t.eq(node.childNodes && node.childNodes.length, 2, "check store.add add a child node");
            store.remove(record_foo);
            t.eq(node.childNodes && node.childNodes.length, 1, "check store.remove remove a child node");

            node.destroy();
            
        }
        
        function test_order(t) {
            
            t.plan(16);
            
            var store = new Ext.data.Store();
            
            var root = new Ext.ux.tree.TreeStoreNode({
                store: store
            });
            
            var panel = new Ext.tree.TreePanel({
                renderTo: "tree",
                root: root
            });

            var record_factory = Ext.data.Record.create([
                'text',
                {name: 'displayInTree', defaultValue: true}
            ]);
            
            var a = new record_factory({text: "a", displayInTree: true});
            var b = new record_factory({text: "b", displayInTree: true});
            var c = new record_factory({text: "c", displayInTree: true});
            var d = new record_factory({text: "d", displayInTree: true});
            
            // add two records to empty root
            store.add([a, b]);
            t.eq(root.childNodes.length, 2, "[a, b] two records added");
            t.eq(root.childNodes[0].record.get('text'), "b", "[a, b] last record drawn at top of root");
            t.eq(root.childNodes[1].record.get('text'), "a", "[a, b] first record drawn at bottom of root");
            
            // add two records to root with two existing child nodes
            store.add([c, d]);
            t.eq(root.childNodes.length, 4, "[a, b, c, d] four records total");
            t.eq(root.childNodes[0].record.get('text'), "d", "[a, b, c, d] last record drawn at top of root");
            t.eq(root.childNodes[1].record.get('text'), "c", "[a, b, c, d] third record drawn at correct index");
            t.eq(root.childNodes[2].record.get('text'), "b", "[a, b, c, d] second record drawn at correct index");
            t.eq(root.childNodes[3].record.get('text'), "a", "[a, b, c, d] first record drawn at bottom of root");
            
            // remove the first two layers in draw order
            store.remove(store.getAt(0));
            store.remove(store.getAt(0));
            t.eq(root.childNodes.length, 2, "[c, d] two records total");
            t.eq(root.childNodes[0].record.get('text'), "d", "[c, d] last record drawn at top of root");
            t.eq(root.childNodes[1].record.get('text'), "c", "[c, d] first record drawn at bottom of root");
            
            // insert two records in the middle
            store.insert(1, [a, b]);
            t.eq(root.childNodes.length, 4, "[c, a, b, d] four records total");
            t.eq(root.childNodes[0].record.get('text'), "d", "[c, a, b, d] last record drawn at top of root");
            t.eq(root.childNodes[1].record.get('text'), "b", "[c, a, b, d] third record drawn at correct index");
            t.eq(root.childNodes[2].record.get('text'), "a", "[c, a, b, d] second record drawn at correct index");
            t.eq(root.childNodes[3].record.get('text'), "c", "[c, a, b, d] first record drawn at bottom of root");
            
            root.destroy();
            
        }
        
        </script>
    </head>
    <body>
        <div id="tree" style="width: 100px; height: 100px;"></div>
    </body>
</html>
